<template>
  <page-container>
    <a-card>
      <div class="form">
        <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-item label="流转单ID">11111</a-form-item>
          <a-form-item label="标题">待签收</a-form-item>
          <a-form-item label="流转单标题">五里冲派出所综合指挥室信息流转单</a-form-item>
          <a-form-item label="推送人">李逍遥</a-form-item>
          <a-form-item label="推送类别">案件回访</a-form-item>
          <a-form-item label="下发辖区">福园居委会（张颉）</a-form-item>
          <a-form-item label="处理期限">5天</a-form-item>
          <a-form-item label="推送情况">
            2021年10月19日16时许，我所接110指令，系报警人XXX（男，身份证号码：XXXX，现住地址：贵阳市南明区XXXXX，联系电话：XXXXXX）在贵阳市南明区XXXX家中，通过手机抖音观看讲解股票视频向对方提供的网站进行博彩，陆续向对方提供的账户转账XX笔共计被骗：XXXX元人民币。我所报立为刑事案件侦查（XXX社区）。请社区警务队XX社区民警XXX于5日内联系受害人开展案件回访工作，回访情况请于2021年10月24日前书面回复综合指挥室指挥调度组。
          </a-form-item>
        </a-form>
      </div>
      <div class="bottomc">
        <div class="buttonContent">
          <a-button @click="onSubmit">返回</a-button>
          <a-button style="margin-left: 10px">PDF阅览</a-button>
          <a-button type="primary" style="margin-left: 10px">确定下发</a-button>
        </div>
      </div>
    </a-card>
  </page-container>
</template>
<script lang="ts">
import { defineComponent, reactive, toRaw } from 'vue';
import type { UnwrapRef } from 'vue';
interface FormState {
  name: string;
  region: string | undefined;
  delivery: boolean;
  type: string[];
  resource: string;
  desc: string;
}
export default defineComponent({
  setup() {
    const formState: UnwrapRef<FormState> = reactive({
      name: '',
      region: undefined,
      date1: undefined,
      delivery: false,
      type: [],
      resource: '',
      desc: '',
    });
    const onSubmit = () => {
      console.log('submit!', toRaw(formState));
    };
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
    };
  },
});
</script>
<style lang="less" scoped>
.form {
  width: 50%;
  margin: 0 auto;
  padding: 30px;
  :deep(.ant-form-horizontal .ant-form-item-control) {
    padding-top: 0px;
  }
}
.bottomc {
  display: flex;
  align-items: center;
  width: 100%;
  height: 70px;
  border-top: 1px solid #3f424d;
  .buttonContent {
    width: 300px;
    margin: 0 auto;
  }
}
:deep(.ant-card-body) {
  padding: 0;
}
</style>
